/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
init()
function init(){
  
    submitHandler()
    clickHandler()
}

function submitHandler(){
    const res = window.localStorage.getItem('str')
    const res1 = window.localStorage.getItem('ss')
    const form = document.querySelector("form")
    const addBox = document.querySelector('#title')
    const todolistBox = document.querySelector("#todolist")
    const todoCountBox = document.querySelector('#todocount')
    const donelist = document.querySelector('#donelist');
    todolistBox.innerHTML = res;
    donelist.innerHTML = res1;
    for(let i = 0;i<todolistBox.children.length;i++){
        todolistBox.children[i].firstElementChild.checked=""
    }
    for(let i = 0;i<donelist.children.length;i++){
        donelist.children[i].firstElementChild.checked="checked"
    }  
    count()


    form.addEventListener('submit',e=>{
        e.preventDefault()
        addBox.value.trim()
        const li = document.createElement("li")
        let str = `        
            <input type="checkbox" />
            <p>${addBox.value.trim()}</p>
            <a href="javascript:;">-</a>
        `
        li.innerHTML= str;
        todolistBox.appendChild(li)
        addBox.value = "";
        todoCountBox.innerText = todolistBox.children.length
        let str1 = todolist.innerHTML;
         window.localStorage.setItem('str',str1);
   })
}


function clickHandler(){
    const todolist = document.querySelector('#todolist')
    const donelist = document.querySelector('#donelist');
    click(todolist, donelist)
    click(donelist, todolist)
    
}
function click(ele,tar){
    ele.addEventListener('click',e=>{
        if(e.target.nodeName ==="INPUT" && e.target.type === "checkbox"){
            tar.appendChild(e.target.parentElement)
            count()
        }
        else if(e.target.nodeName === 'P'){
            let str = '<input type="text" value="'+e.target.innerText+'">'

            e.target.innerHTML = str;
            e.target.firstElementChild.onblur = function(){
                e.target.innerText = this.value;
            }
        }else if(e.target.nodeName === 'A'){
            e.target.parentElement.parentElement.removeChild(e.target.parentElement)
            count()
        }
        str1 = todolist.innerHTML;
        window.localStorage.setItem('str',str1);
        let ss = donelist.innerHTML;
            window.localStorage.setItem('ss',ss)

    })
}

function count(){
    document.querySelector('#todocount').innerText = todolist.children.length
    document.querySelector('#donecount').innerText = donelist.children.length
}

const ip = document.querySelector('#ipv4')
const area = document.querySelector('#addr')
const xhr = new XMLHttpRequest()
    xhr.open('GET','/lxr')
    xhr.send()
    xhr.onload = function () {
        const res = JSON.parse(xhr.responseText)
        
ip.innerHTML=`${res.ip}`;
area.innerHTML=`${res.area}`
    }

